<template>
    <div class="flex-column-start xp-component" @click="open" title="待办事项">
        <div class="xp-todo-header flex-start">
            待办事项
        </div>
        <div class="full-layout xp-todo-content scrollbar">
            <div class="flex-center xp-todo-item-box"
            v-for="item in appStore.getTodoList()" 
            :key="item.todoId" 
            @click="handleSelect(item)">
                <div class="xp-todo-item">
                    <p class="flex-between">
                        <div class="flex-center">
                            <div class="xp-todo-radius" :style="{backgroundColor:level[item.level].bg}"></div>
                            <p class="xp-todo-title oneline" :title="item.content" 
                            :style="{
                                textDecoration: item.isFinish?'line-through':'', 
                                color:item.isFinish?'#808080':''
                            }">{{item.content}}</p>
                        </div>
                        <div class="flex-center">
                            <el-icon @click.stop="handleDelete(item)" style="margin-left:10px"><Delete /></el-icon>
                        </div>
                    </p>
                    <div class="xp-todo-time">
                        {{item.ut}}
                    </div>
                </div>
                <el-checkbox 
                @click.stop="null"
                v-model="item.isFinish" 
                :true-label="1"
                :false-label="0"
                @change="(val) => handleChange(val, item)"
                style="margin-left:15px">
                </el-checkbox>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from 'vue';
import { useAppStore } from '@/store/app';
export default {
    name:'xpTodo',
    props: {

    },
    components: {

    },
    emits:['open'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            checked1:false,
            options:{
                type:'slot',
                id:'1004',
                name:'待办事项',
                component:'xpTodos',
                xIcon:require('@/assets/todo.png'),
                data:null,
                background:'#e5a10a'
            },
            level:[
                {
                    bg:'#00ca4e',
                    value:0,
                    label:'不重要'
                },
                {
                    bg:'#0594fa',
                    value:1,
                    label:'较重要'
                },
                {
                    bg:'#ffbd44',
                    value:2,
                    label:'重要'
                },
                {
                    bg:'#ff605c',
                    value:3,
                    label:'紧急'
                }
            ]
        });
        let methods = {
            open ()
            {
                data.options.data = null;
                context.emit('open', data.options);
            },
            handleChange (value, item)
            {
                appStore.finishTodo(item.todoId);
            },
            handleDelete (value)
            {
                appStore.deleteTodo(value.todoId);
            },
            handleSelect (value)
            {
                data.options.data = value;
                context.emit('open', data.options);
            }
        };
        return { 
            ...toRefs(data),
            ...methods,
            appStore
        };
    }
};
</script>

<style scoped lang="scss">
.xp-component {
    width: 100%;
    height: 100%;
    position: relative;
}

.xp-todo-header {
    width: 100%;
    height: 50px;
    background-image: linear-gradient(135deg,#3990fd,#185abd);
    padding: 10px 20px;
}

.xp-todo-content {
    overflow-y: auto;
}

.xp-todo-item-box {
    margin: 8px 10px;
}
.xp-todo-item {
    background-color: $BackgroundColor;
    border-radius: 10px;
    padding: 6px 10px;
    text-align: left;
    width: 100%;
    color: $TextColor;


    i {
        transition: all .3s;

        &:hover {
            color:$PrimaryColor;
        }
    }

    .xp-todo-title {
        font-size: .9em;
        font-weight: 550;
        padding: 2px 4px;
        width: calc(100% - 16px);
    }

    .xp-todo-time {
        padding: 2px 0;
        font-size: 13px;
        color: #3282e5;
    }
}

.xp-todo-radius {
    border-radius: 50%;
    // background-color: #eb332d;
    width: 16px;
    height: 16px;
}


</style>
